<template>
  <div class="app-container">
      <el-row type="flex" justify="center" align="middle" :gutter="10">
        <el-col :span="24" :xs="24">
             <el-form
               ref="queryForm"
               :model="queryParams"
               :inline="true"
               label-width="68px"
               size="medium"
               >
                <el-form-item label="订单编号" prop="orderNo">
                     <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" @click="handleQuery" clearable :style="{width: '100%'}">
                     </el-input>
                </el-form-item>
                <el-form-item >

                     <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery"> 搜索 </el-button>

                </el-form-item>
           </el-form>
        </el-col>
      </el-row>

     <!-- <el-table v-loading="loading"  :data="saleOrderDetailList" @selection-change="handleSelectionChange">-->
     <el-table  :data="saleOrderDetailList"  :key="timeStamp">

            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="订单编号" align="center" prop="costumeOrderNo" />
            <el-table-column label="服装编号" align="center" prop="costumeNo" />
            <el-table-column label="服装名称" align="center" prop="costumeName" />
            <el-table-column label="服装规格" align="center" prop="size" />

            <el-table-column label="数量" align="center" prop="saleQuantity"/>
            <el-table-column label="单价" align="center" prop="price"/>

       </el-table>
           </br>
           </br>
           </br>
           <el-form>
                <el-form-item >

                     <el-button type="primary"  size="right" @click="handleQuery2"> 退货 </el-button>

                </el-form-item>
           </el-form>

    <pagination
          v-show="total>0"
          :total="total"

          @pagination="getList"
        />

  </div>
</template>




<script>
import { listOrderDetail} from "@/api/costumeShop/refundOrderCostume";
export default {
  components: {},
  props: [],
  data() {
    return {

      // 总条数
      total: 0,
    timeStamp:0,
    // 遮罩层
    loading: false,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 显示搜索条件
    showSearch: true,

      queryParams:{
      orderNo:null,
      },
      saleOrderDetailList: [
      {costumeOrderNo:"S10001",costumeNo:"c150001",costumeName:"白色短袖",size:"S",saleQuantity:"1",price:"59.9"},
      {costumeOrderNo:"S10001",costumeNo:"c150007",costumeName:"白色帽子",size:"L",saleQuantity:"1",price:"39.9"}],
      rules: {
        field104: [{
          required: true,
          message: '请输入订单编号',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {

     /** 查询saleOrderDetail列表 */
       getList() {
         this.loading = true;
          const orderNo= this.queryParams.orderNo
         listOrderDetail(orderNo).then(response => {

           this.saleOrderDetailList = response.rows;
           this.total = response.total;
           timeStamp++;
           this.$forceUpdate( this.saleOrderDetailList );
           this.loading = false;

         });
       },
       /** 搜索按钮操作 */
             handleQuery() {
              this.getList();
              timeStamp++;
             },
       // 多选框选中数据
          handleSelectionChange(selection) {
            this.ids = selection.map(item => item.saleOrderDetailId)
            this.single = selection.length!==1
            this.multiple = !selection.length
          },

    submitForm() {
      this.$refs['queryForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}


</script>
<style>
</style>
